<template>
	<view>
		<view class="topBox">
			<view class="top">
				<view class="go-back iconfont" @click="goback">
					&#xe602;
				</view>
				<view class="middle">
					我的持仓

				</view>
				<view class="share iconfont">

				</view>
			</view>
			<view class="second-box">
				<view class="second-title">
					总资产（元）
				</view>
				<view class="persent">{{myMoney}}</view>
				<view class="level">数据更新日期 {{updateDate}}</view>

			</view>
			<!-- <button class="update-btn" type="primary" size="mini" @click="updatePie">修改饼状图数据</button> -->
			<view class="class-box">
				<view class="class-item">
					<view class="class-item-top">{{allProfit}}元</view>
					<view class="class-item-bottom">累计收益</view>
				</view>
				<view class="class-item class-item-2">
					<view class="class-item-top">{{nowProfit}}元</view>
					<view class="class-item-bottom">持仓总收益</view>
				</view>

			</view>

		</view>
		<view class="container">
			<view class="canvasView">
				<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
			</view>

		</view>
		<view class="btn-box">
			<view class="btn-item" :class="{active:clickItem==0}" @click="toShouyijilu">
				收益记录
			</view>
			<view class="btn-item" :class="{active:clickItem==1}" @click="toJiaoyijilu">
				交易记录
			</view>
		</view>
		<view class="content">

			<view>
				<view class="product-box">
					<view class="product-item" v-for="(item,key) in chicangList">
						<view class="product-title">
							<view class="title-txt"><label class="title-name">{{item.prod_name}}</label><label class="link" @click="toChanpinxiangqing(item.proj_id,item.whatToPro)">产品详情</label></view>
							<view :class="item.status=='已到期'?'is-daoqi yidaoqi':'is-daoqi weidaoqi'">{{item.status}}</view>
							<!-- <view class="is-daoqi yidaoqi">{{item.status}}</view> -->
							<!-- <view class="is-daoqi weidaoqi">未到期</view> -->
						</view>
						<view class="product-detail">
							<view class="item-left">

								<view class="large-size color">
									{{item.whatToPro}}
								</view>
								<view v-if="item.prod_flg=='N'" class="">
									业绩比较基准
								</view>
								<view v-if="item.prod_flg=='Y'" class="">
									近七日年化收益
								</view>

							</view>

							<view class="item-right">
								<view class="item">

									当前持仓

									<label class="color1">
										{{item.left_amt}}元
									</label>
								</view>
								<view class="item">

									产品份额

									<label class="color1">
										{{item.left_share}}份
									</label>
								</view>
								<view class="item">

									份额确认日

									<label class="color1">
										{{item.querenDate}}
									</label>

								</view>
								<view class="item">

									收益金额

									<label class="color1">
										{{item.amount}}元
									</label>

								</view>
								<view class="item link" @click="toShouyixiangqing(item)">

									收益详情

								</view>

							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import * as echarts from '../../../components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '../../../components/mpvue-echarts/src/echarts.vue';
	import uniSegmentedControl from '../../../components/uni-segmented-control.vue';
	import global_wyx from '../../../components/tool/licaishiwyx';
	// const ;

	let pieOption = {
		animation: false,
		backgroundColor: '',
		color: ['#8250f5', '#f7a900', '#ff7800', '#3da3fe', '#FFDB5C', '#FF9F7F'],
		series: [{
			label: {
				normal: {
					fontSize: 14
				}
			},
			type: 'pie',
			center: ['50%', '60%'],
			radius: ['40%', '70%'],
			data: [],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 2, 2, 0.3)'
				}
			}
		}]
	};



	export default {
		components: {
			mpvueEcharts,

		},
		data() {
			return {
				echarts: echarts,
				updateStatus: false, 
				clickItem: '',
				token:uni.getStorageSync('token_key'),
				news_Id:'',//客户id
				allProfit:'',//累计收益
				nowProfit:'',//持仓总收益
				typeList:[],//饼图上的分类
				myMoney:'',//我的资产
				updateDate:'',//数据更新日期
				cityList : [{
					value: 25,
					name: '固定收益 25%'
				}, {
					value: 45,
					name: '私募股权 45%'
				}, {
					value: 15,
					name: '增值 15%'
				}, {
					value: 15,
					name: '报险 15%'
				}],
				chicangList:[],
				prod_flg:''
			};
		},
		onLoad(item) {
			// pieOption.series[0].data = this.cityList;
			this.news_Id = item.news_Id;
			console.info("this.news_Id"+this.news_Id)
			// console.log(pieOption.series[0].data);
			this.wodechicang();
			this.wodechicangList();
			function sleep2(ms) {
				return new Promise(function(resolve, reject) {
					setTimeout(resolve, ms)
				})
			}
			sleep2(900).then(() => {
				this.updatePie(this.typeList);
			})
		},
		methods: {
			pieInit(canvas, width, height) {
				let pieChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(pieChart)
			
				pieChart.setOption(pieOption)
				return pieChart
			},
			updatePie(item) {
				if (this.updateStatus) {
					return;
				}
				pieOption.series[0].data = []
				for(var i =0;i<item.length;i++){
					pieOption.series[0].data.push({
						value: parseInt(item[i].bili),
						name: item[i].type+" "+item[i].bili+'%'
					});
				}
				
				this.$refs.pieChart.init();
				this.updateStatus = true;
			},
			wodechicang() {
				uni.request({
					url: global_wyx.api.lcs_wodeChicang,
					method: 'POST',
					data: {
						token:this.token,
						custid:this.news_Id
					},
					header : {'content-type':'application/x-www-form-urlencoded'},
					success: res => {
						var resultData = res.data.data;
						// resultData.allProfit
						this.myMoney = resultData.myMoney;
						this.updateDate = resultData.updateDate;//数据更新日期
						this.allProfit = resultData.allProfit;//累计收益
						this.nowProfit = resultData.nowProfit;//持仓总收益
						var arr = new Array();
						arr = resultData.lcsChicangOneBoList;
						this.typeList = arr;
						// pieOption.series[0].data = this.cityList;
// 						pieOption.series[0].data.push({
// 							value: 20,
// 							name: '武汉'
// 						});
						console.info("============="+JSON.stringify(pieOption.series[0].data))
						console.info(resultData)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			wodechicangList() {
				uni.request({
					url: global_wyx.api.lcs_chicangxiangqing,
					method: 'POST',
					data: {
						token:this.token,
						custid:this.news_Id
					},
					header : {'content-type':'application/x-www-form-urlencoded'},
					success: res => {
						var resultData1 = res.data.data;
						console.info(resultData1)
						this.chicangList = resultData1;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goback() {
				uni.navigateBack()
			},
			toProductDetail() {
				uni.navigateTo({
					url: './productDetail/productDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toYuyueliucheng() {
				uni.navigateTo({
					url: './simuYuyue/simuYuyue',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toChicangxiangqing() {
				uni.navigateTo({
					url: './chicangxiangqing/chicangxiangqing',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
// 			pieInit(canvas, width, height) {
// 				let pieChart = echarts.init(canvas, null, {
// 					width: width,
// 					height: height
// 				})
// 				canvas.setChart(pieChart)
// 				pieChart.setOption(pieOption)
// 				return pieChart
// 			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			toShouyijilu() {
				this.clickItem = 0
				uni.navigateTo({
					url: './shouyijilu/shouyijilu?news_Id='+this.news_Id+'&allProfit='+this.allProfit,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toJiaoyijilu() {
				this.clickItem = 1
				uni.navigateTo({
					url: './jiaoyijilu/jiaoyijilu?news_Id='+this.news_Id+'&allProfit='+this.allProfit,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toChanpinxiangqing(proj_id,whatToPro) {
				console.info("proj_id"+proj_id+"whatToPro"+whatToPro)
				uni.navigateTo({
					url: '../../product/productYemian/productDetail/productDetail?projId='+proj_id+'&yield='+whatToPro,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toShouyixiangqing(c) {
				// if(c.amount!="0"){
					uni.navigateTo({
						url: './shouyimingxi/shouyimingxi?chicangInfo='+JSON.stringify(c),
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
// 				}else{
// 					uni.showToast({
// 						title: '暂无收益',
// 						icon:'none',
// 						mask: false,
// 						duration: 1500
// 					});
// 				}
			}
		}
	}
</script>

<style>
	page {
		background: rgb(255, 255, 255);
		min-height: 100%;

	}

	.topBox {

		width: 100%;
		height: 450upx;
		background: url("http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.3-%E4%BA%A7%E5%93%81%E8%AF%A6%E6%83%85/android/drawable-xhdpi/peijing.png") center no-repeat;
		background-size: 100% 450upx;
	}

	.top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 67upx 30upx 0 37upx;
		color: rgb(255, 255, 255);
	}

	.middle {
		font-size: 18px;
	}

	.go-back {
		font-size: 17px;
	}

	.share {
		font-size: 20px;
	}

	.second-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		color: rgb(255, 255, 255);
		text-align: center;
	}

	.second-title {
		font-size: 12px;
		margin: 50upx 0 25upx;
	}

	.persent {
		height: 63upx;
		font-size: 32px;
		margin-bottom: 39upx;

	}

	.level {
		font-size: 12px;
	}

	.class-box {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		height: 120upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
		margin: 38upx 20upx 0;
		align-items: center;
		z-index: 9999;
	}

	.class-item {
		flex: 1;
	}

	.class-item-2 {
		border-right: 1px solid rgba(242, 241, 240, 1);
		border-left: 1px solid rgba(242, 241, 240, 1);
	}

	.class-item-top {
		color: rgba(51, 51, 51, 1);
		font-size: 15px;
		line-height: 40upx;
	}

	.class-item-bottom {
		color: rgba(187, 187, 187, 1);
		font-size: 12px;
		line-height: 30upx;
	}

	.echarts-box {
		height: 420upx;
		width: 100%;
	}

	.container {
		padding: 30upx 0;
		box-sizing: border-box;

	}

	.container,
	.canvasView {
		flex: 1;
		flex-direction: column;
	}

	.canvasView canvas {
		height: 380upx;
	}

	.navigate {
		color: #007AFF;
	}

	.canvas-bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}








	.color {
		color: rgb(200, 166, 91);
		font-size: 24px;

	}

	.color-gray {
		color: #999999;
	}

	.size {
		font-size: 16px;
	}

	.is-daoqi {
		border: 1px solid rgba(196, 156, 90, 1);
		border-radius: 11px;
		height: 44upx;
		line-height: 44upx;
		font-size: 12px;
		padding: 0 10upx;
	}

	.weidaoqi {
		color: rgba(196, 156, 90, 1);
	}

	.yidaoqi {
		color: rgba(221, 221, 221, 1);
		border: 1px solid rgba(221, 221, 221, 1);
	}

	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 320upx;
		border-radius: 10upx;
		box-sizing: border-box;
		margin: 0 auto;
		overflow: hidden;
		border: 1px solid rgba(196, 156, 90, 1);

	}

	.btn-item {
		flex: 1;
		text-align: center;
		line-height: 54upx;
		box-sizing: border-box;
		color: rgba(196, 156, 90, 1);
	}

	.btn-item:first-child {
		border-right: 1px solid rgba(196, 156, 90, 1);
	}

	.active {
		color: rgb(255, 255, 255);
		background: rgba(196, 156, 90, 1);
	}


	.product-item {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		margin-top: 20upx;

	}

	.product-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		height: 40px;
		text-align: left;
		font-size: 15px;
		margin: 0 30upx;
	}

	.title-name {
		margin-right: 10px;
		max-width: 160px;
		height: 20px;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.product-detail {
		padding: 20upx 0;
		display: flex;
		border-top: 1px solid rgba(238, 238, 238, 1);
		border-bottom: 1px solid rgba(238, 238, 238, 1);

	}

	.color1 {
		color: #999999;
		margin-left: 5px;
	}

	.item {
		display: flex;
		flex-direction: row;
		line-height: 20px;
	}

	.item-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 50upx;
		justify-content: center;

	}

	.item-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #EEEEEE;
	}

	.color {
		color: rgba(196, 156, 90, 1);

	}

	.size {
		font-size: 16px;
	}

	.large-size {
		font-size: 24px;
	}

	.link {
		font-size: 12px;
		color: #f7a900;
		text-decoration: underline;
	}
</style>
